<template>
  <van-cell-group>
    <van-popup v-model="popupVis" round get-container="body">
      <van-picker :title="placeholder" :columns="options" :show-toolbar="true" value-key="name" @confirm="choose"
        @cancel="popupVis = false" />
    </van-popup>
    <van-cell :title="name" :required="required == false ? false : true" is-link @click="
      () => {
        if (!disabled) popupVis = true
      }
    " :value="data.displayName" />
  </van-cell-group>
</template>
<script>
export default {
  props: ['value', 'disabled', 'props', 'required', 'isBusiness'],
  data: function () {
    return {
      data: {
        value: null,
        displayName: '',
      },
      popupVis: false,
    }
  },
  computed: {
    myprops() {
      return this.props ? this.props : []
    },
    name() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'name')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? val.BFFP_Value : '单选'
        } else {
          return val.FFLP_Value ? val.FFLP_Value : '单选'
        }
      }
      return '单选'
    },
    options() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'options')
      console.log(val)
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value
            ? JSON.parse(val.BFFP_Value).map((x) => {
              return { name: x.Text }
            })
            : []
        } else {
          return val.FFLP_Value
            ? JSON.parse(val.FFLP_Value).map((x) => {
              return { name: x.Text }
            })
            : []
        }
      }
      return []
    },
    placeholder() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'placeholder')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? val.BFFP_Value : '请选择'
        } else {
          return val.FFLP_Value ? val.FFLP_Value : '请选择'
        }
      }
      return '请选择'
    },
  },
  methods: {
    choose(item) {
      this.data.value = item.name
      this.data.displayName = item.name
      this.$emit('input', JSON.stringify(this.data))
      this.$emit('display', this.data.displayName)
      this.popupVis = false
    },
  },
  mounted: function () {
    if (this.value) {
      this.data = JSON.parse(this.value)
    }
  },
}
</script>
<style scoped>
.el-form-item {
  margin: 10px !important;
}
</style>